<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础API</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrapEx.css">
    <link rel="stylesheet" href="../js/prettyPrint/css/prettify.css">
    <link rel="stylesheet" href="api.css">


    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/prettyPrint/js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
    <div class="container-fluid">
        <div class="">
            <div class="span12">
                <h1>属性</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui.base </h3>
                <p>所有控件继承此属性</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">属性名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">id</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.getId()</div>
                        <div class="col-xs-3 col-sm-3">控件ID</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">renderto</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">绘制到容器的对象或选择器</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">type</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">base</div>
                        <div class="col-xs-3 col-sm-3">控件类型</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">firstInit</div>
                        <div class="col-xs-3 col-sm-3">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-3 col-sm-3">第一次加载是否完成</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN</div>
                        <div class="col-xs-3 col-sm-3">当前语言包</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">cls</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">自定义样式 在绘制之前会在renderto加入该样式</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">css</div>
                        <div class="col-xs-3 col-sm-3">Object</div>
                        <div class="col-xs-3 col-sm-3">{}</div>
                        <div class="col-xs-3 col-sm-3">自定义内部样式 在绘制之后会在renderto加入该样式</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 alert(Modal1.type); //Modal
 alert(Modal1.renderto); //#modal1</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui <small>返回类型: object</small></h3>
                <p>创建控件后，可以根据id得到控件实例</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var m = bsEx.ui.modal1;//比如控件ID为modal1
 alert(m.id); //modal1</code> </pre>
                <hr/>
            </div>
            
        </div>
        <div class="">
            <div class="span12">
                <h1>方法</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui(obj) <small>返回类型: object</small></h3>
                <p>创建控件后，可以根据id|控件对象|控件DOM对象 得到控件实例</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var m = bsEx.ui("modal1");//比如控件ID为modal1
 alert(m.id); //modal1
 var m = bsEx.ui($("#modaldiv"));//比如控件的renderto为#modaldiv</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui.base.init() <small>返回类型: 无</small></h3>
                <p>绘制方法，所有控件继承</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>bsEx.ui.modal1.init();</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui.base.eve.on(ename,fun) <small>返回类型: 无</small></h3>
                <p>注册事件方法，所有控件继承</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">ename</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">注册事件的名称，多个名称用英文空格隔开</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">fun</div>
                        <div class="col-xs-3 col-sm-3">function</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">事件回调函数</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var update = function(t){alert(t)};//写一个方法
 function InitModal1() {
     //创建控件
     Modal1 = new bsEx.Modal({
         id:"Modal1",renderto:"#modal1",body:"Hello World",
         onupdate:update//第一种注册事件，作为控件属性使用on+事件名称
     });
     Modal1.on("update",update);//第二种通过on注册事件，当触发事件时执行update方法，注意这种写法一个事件可以注册多个方法
 }
 function Modal1_onupdate(t){update(t);};//第三种，在页面直接新增方法控件ID+_on+事件名称</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ui.base.eve.trigger(ename,args) <small>返回类型: 无</small></h3>
                <p>触发事件方法，所有控件继承</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">ename</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">触发事件的名称</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">args</div>
                        <div class="col-xs-3 col-sm-3">数组[]</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">触发事件传的参数</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var update = function(t){alert(t)};//写一个方法
 function InitModal1() {
     //创建控件
     Modal1 = new bsEx.Modal({
         id:"Modal1",renderto:"#modal1",body:"Hello World",
         onupdate:update//第一种注册事件，作为控件属性使用on+事件名称
     });
     Modal1.on("update",update);//第二种通过on注册事件，当触发事件时执行update方法，注意这种写法一个事件可以注册多个方法
 }
 function Modal1_onupdate(t){update(t);};//第三种，在页面直接新增方法控件ID+_on+事件名称 
 ...
 Modal1.trigger("update",["更新成功"]);//触发update事件，会同时执行以上三种注册的方法</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.getId() <small>返回类型: string</small></h3>
                <p>得到一个当前页面不重复的ID，以bsex 开头</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var id = bsEx.getId();
 alert(id); //bsex1</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.isStr(obj) <small>返回类型: boolean</small></h3>
                <p>判断参数类型是否为字符串类型</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">obj</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要判断的值</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>alert(bsEx.isStr({a:'a'})); //false</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.isObj(obj) <small>返回类型: boolean</small></h3>
                <p>判断参数类型是否为object类型</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">obj</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要判断的值</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>alert(bsEx.isObj({a:'a'})); //true</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.isNub(obj) <small>返回类型: boolean</small></h3>
                <p>判断参数类型是否为数字类型</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">obj</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要判断的值</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>alert(bsEx.isNub(1)); //true
alert(bsEx.isNub('1')); //false</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.isMobile() <small>返回类型: boolean</small></h3>
                <p>判断是否是移动端浏览器</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.doCallback(fn,args) <small>返回类型: object</small></h3>
                <p>回调方法</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">fn</div>
                        <div class="col-xs-3 col-sm-3">function</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">回调方法</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">args</div>
                        <div class="col-xs-3 col-sm-3">数组[]</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">回调方法参数</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>var fn = function(a,b){alert(a+b)};
bsEx.doCallback(fn,[1,2]); //3</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.initNavbarTab(navbar,tab,op) <small>返回类型: 无</small></h3>
                <p>导航栏菜单和页签的绑定方法，点击导航栏的菜单会再页签中显示</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">navbar</div>
                        <div class="col-xs-3 col-sm-3">type:"Navbar"</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">导航栏控件实例</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">tab</div>
                        <div class="col-xs-3 col-sm-3">type:"Tab"</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">页签控件实例</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">op</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">{}</div>
                        <div class="col-xs-3 col-sm-3">bsEx.tab.tabdefault</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> bsEx.initNavbarTab(navbar1,tab1,{showclosebtn:true});//注册菜单和页签关系 导航栏实例，页签实例，页签可以关闭</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.winresizeend(fun,args) <small>返回类型: 无</small></h3>
                <p>注册页面改变大小事件方法</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">fun</div>
                        <div class="col-xs-3 col-sm-3">function</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">注册的回调方法</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">args</div>
                        <div class="col-xs-3 col-sm-3">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-3 col-sm-3">回调方法参数</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>var fn = function(id){
    alert("窗口大小改变了"+id);
};
bsEx.winresizeend(fn,["tab1"]);//窗口大小改变了tab1</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.delanguage(bsEx.language) <small>返回类型: 无</small></h3>
                <p>修改默认语言配置<br/>默认值 bsEx.language.zhCN 修改语言请使用以下标准</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> bsEx.language.zhCN = {
     Dropdownlist: {
         selectnoneText: function () { return '-----请选择-----'; },
         deselectAllText: function () { return '清空'; },
         selectAllText: function () { return '全选'; }
     },
     Modal: {
         title: function () { return "窗口标题"; },
         closebtn: function () { return "关闭"; }
     },
     Tab: {
     },
     Navbar: {
         title:function(){return "网页标题";}
     },
     ItemForm:{
         valmsg:function(){return "请填写"},
     },
     Panel:{
         title:function(){return "标题";}
     },
     Button:{
         text:function(){return "按钮";},
         loadingtxt:function(){return "加载中..."}
     }
 };
                </code> </pre>
                <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>事件</h1>
                <hr/>
            </div>
            <div class="">
                <h3>beforeinit(t) <small>返回类型: 无</small></h3>
                <p>绘制前事件，执行init()后第一个执行，可以对实例进行操作影响init执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("beforeinit",function(t){alert(t.id++"绘制开始")});//bsex1绘制开始</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>inited(t) <small>返回类型: 无</small></h3>
                <p>绘制后事件，执行init()后执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("inited",function(t){alert(t.id+"绘制完毕")});//bsex1绘制完毕</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>alleve(name,[args]) <small>返回类型: 无</small></h3>
                <p>当触发控件事件时，最后都会触发该事件</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">name</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">触发事件名称</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">args</div>
                        <div class="col-xs-3 col-sm-3">[]数组</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-3 col-sm-3">触发事件参数</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("alleve",function(name,arge){
     alert("触发了"+name+"事件");//这样不论触发了什么事件，都可以在此统一拦截
 })</code> </pre>
                <hr/>
            </div>
        </div>
</body>

</html>